import React from 'react';
import {HeaderWrapper, Logo, Nav, NavItem, NavSearch, Button, Addition, SearchWrapper,
    SearchInfo, SearchInfoTitle, SearchInfoSwitch, SearchInfoItem} from "./style";
import {CSSTransition} from 'react-transition-group'
import {connect} from 'react-redux'
import {actionCreators} from './store'

const Header = (props) => {
    return(
        <HeaderWrapper>
            <Logo/>
            <Nav>
                <NavItem className='left active'>首页</NavItem>
                <NavItem className='left'>下载App</NavItem>
                <NavItem className='right'>登陆</NavItem>
                <NavItem className='right'>
                    <i className="iconfont">&#xe636;</i>
                </NavItem>
                <SearchWrapper>
                    <CSSTransition in={props.focused} timeout={200} classNames='slide'>
                        <NavSearch className={props.focused ? 'focused': ''}
                                   onFocus={props.handleInputFocus}
                                   onBlur={props.handleInputBlur}></NavSearch>
                    </CSSTransition>
                    <i className={props.focused ? 'focused iconfont': 'iconfont'}>&#xe63d;</i>
                    <SearchInfo>
                        <SearchInfoTitle>
                            热门搜索
                            <SearchInfoSwitch>
                                换一换
                            </SearchInfoSwitch>
                        </SearchInfoTitle>
                        <div>
                            <SearchInfoItem>教育</SearchInfoItem>
                            <SearchInfoItem>生活</SearchInfoItem>
                            <SearchInfoItem>监视</SearchInfoItem>
                            <SearchInfoItem>docker</SearchInfoItem>
                            <SearchInfoItem>python</SearchInfoItem>

                        </div>
                    </SearchInfo>
                </SearchWrapper>
            </Nav>
            <Addition>
                <Button className='reg'>注册</Button>
                <Button className='writing'>
                    <i className="iconfont">&#xe615;</i>
                    写文章
                </Button>
            </Addition>
        </HeaderWrapper>
    )
};

const mapStateToProps = (state) =>{
    return{
        focused: state.get('header').get('focused')
    }
};

const mapDispatchToProps = (dispatch) =>{
    return{
        handleInputFocus() {
            dispatch(actionCreators.searchFocus());
        },
        handleInputBlur(){
            dispatch(actionCreators.searchBlur());
        }
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(Header)
